<template>
  <view class="index-container">
    <!-- 头部信息区域 -->
    <view class="header-section">
      <view class="shop-info">
        <view class="avatar"></view>
        <text class="welcome-text">XXX修车厂，欢迎您</text>
      </view>
      <view class="action-buttons">
        <button :class="['scan-btn']">扫码核销</button>
        <button :class="['code-btn']" @click="navigateToInputVerification">输入核销码</button>
      </view>
    </view>

    <!-- 功能网格区域 -->
    <view class="function-grid">
      <view class="grid-item" v-for="(item, index) in functionItems" :key="index" @click="handleFunctionClick(item.name)">
        <view class="icon-container" :class="item.iconClass">
          <image :src="item.icon" mode="aspectFit"></image>
        </view>
        <text class="item-name">{{ item.name }}</text>
        <view v-if="item.hasBadge" class="badge"></view>
      </view>
    </view>

    <!-- 最新通知区域 -->
    <view class="notification-section">
      <view class="notification-header">
        <image src="/static/logo.png" class="bell-icon" mode="aspectFit"></image>
        <text class="notification-title">最新通知</text>
      </view>
      <view class="notification-content" @click="navigateToRepairTask">
        <text class="notification-text">今日需上门取车任务共32件</text>
        <text class="notification-arrow">>></text>
      </view>
    </view>

    <!-- 任务列表区域 -->
    <view class="task-section">
      <view class="task-header">
        <text class="task-title">用户</text>
        <text class="task-title">服务项目</text>
        <text class="task-title">时间</text>
      </view>
      <view class="task-list">
        <view class="task-item" v-for="(task, index) in taskList" :key="index">
          <text class="task-info">{{ task.user }}</text>
          <text class="task-info task-project">{{ task.project }}</text>
          <text class="task-info">{{ task.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义类型
interface FunctionItem {
  name: string;
  icon: string;
  iconClass: string;
  hasBadge: boolean;
}

interface TaskItem {
  user: string;
  project: string;
  time: string;
}

// 功能模块数据
const functionItems = ref<FunctionItem[]>([
  { name: '经营统计', icon: '/static/logo.png', iconClass: 'blue-icon', hasBadge: false },
  { name: '核销记录', icon: '/static/logo.png', iconClass: 'orange-icon', hasBadge: false },
  { name: '收支明细', icon: '/static/logo.png', iconClass: 'green-icon', hasBadge: false },
  { name: '订单管理', icon: '/static/logo.png', iconClass: 'blue-icon', hasBadge: true },
  { name: '卡券管理', icon: '/static/logo.png', iconClass: 'blue-icon', hasBadge: false },
  { name: '维修任务', icon: '/static/logo.png', iconClass: 'pink-icon', hasBadge: true },
  { name: '评价管理', icon: '/static/logo.png', iconClass: 'blue-icon', hasBadge: false },
  { name: '商户资料', icon: '/static/logo.png', iconClass: 'purple-icon', hasBadge: false },
  { name: '活动发布', icon: '/static/logo.png', iconClass: 'orange-icon', hasBadge: false }
]);

// 任务列表数据
const taskList = ref<TaskItem[]>([
  { user: '张**', project: '汽车美容', time: '2022-10-10 11:09' },
  { user: '张**', project: '基础保养', time: '2022-10-10 11:09' },
  { user: '张**', project: '车辆维修-上门取车', time: '2022-10-10 11:09' },
  { user: '张**', project: '汽车美容', time: '2022-10-10 11:09' },
  { user: '张**', project: '车辆维修-到店维修', time: '2022-10-10 11:09' }
]);

// 跳转到维修任务页面
const navigateToRepairTask = (): void => {
  uni.navigateTo({
    url: '/pages/repairTask/repairTask'
  });
};

  // 跳转到输入核销码页面
const navigateToInputVerification = (): void => {
  uni.navigateTo({
    url: '/pages/verification/inputVerification'
  });
};

  // 处理功能点击
const handleFunctionClick = (name: string): void => {
  console.log('点击了功能：', name);
  
  // 核销记录页面跳转
  if (name === '核销记录') {
    uni.navigateTo({
      url: '/pages/verificationRecord/verificationRecord'
    });
  } 
  // 收支明细页面跳转
  else if (name === '收支明细') {
    uni.navigateTo({
      url: '/pages/income/income'
    });
  }
  // 订单管理页面跳转
  else if (name === '订单管理') {
    uni.navigateTo({
      url: '/pages/order/order'
    });
  }

  // 维修任务页面跳转
  else if (name === '维修任务') {
    uni.navigateTo({
      url: '/pages/repairTask/repairTask'
    });
  }
  // 评价管理页面跳转
  else if (name === '评价管理') {
    uni.navigateTo({
      url: '/pages/reviewManagement/reviewManagement'
    });
  }
  // 商户资料页面跳转
  else if (name === '商户资料') {
    uni.navigateTo({
      url: '/pages/information/information'
    });
  }
  else {
    // 其他功能暂时显示提示
    uni.showToast({
      title: `进入${name}`,
      icon: 'none'
    });
  }
};
</script>

<style lang="scss" scoped>
.index-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 头部信息区域 */
.header-section {
  background-color: #1989fa;
  padding: 30rpx 30rpx 60rpx;
  border-radius: 0 0 30rpx 30rpx;
}

.shop-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: white;
  margin-right: 20rpx;
}

.welcome-text {
  font-size: 32rpx;
  color: white;
  font-weight: 600;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.scan-btn, .code-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #1989fa;
  background-color: white;
  border: none;
  border-radius: 40rpx;
}

/* 功能网格区域 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  padding: 30rpx;
  margin-top: -40rpx;
  background-color: transparent;
}

.grid-item {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx 0;
  text-align: center;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.icon-container {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  margin: 0 auto 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blue-icon {
  background-color: #e6f7ff;
}

.orange-icon {
  background-color: #fff7e6;
}

.green-icon {
  background-color: #f6ffed;
}

.pink-icon {
  background-color: #fff0f6;
}

.purple-icon {
  background-color: #f9f0ff;
}

.icon-container image {
  width: 50rpx;
  height: 50rpx;
}

.item-name {
  font-size: 26rpx;
  color: #333;
}

.badge {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #ff4d4f;
}

/* 最新通知区域 */
.notification-section {
  margin: 0 30rpx 30rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.bell-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.notification-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 600;
}

.notification-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s;

  &:active {
    background-color: #f0f0f0;
  }
}

.notification-text {
  font-size: 28rpx;
  color: #666;
}

.notification-arrow {
  font-size: 28rpx;
  color: #999;
}

/* 任务列表区域 */
.task-section {
  margin: 0 30rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.task-header {
  display: flex;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.task-title {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  font-weight: 600;
}

.task-list {
  max-height: 400rpx;
  overflow-y: auto;
}

.task-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.task-item:last-child {
  border-bottom: none;
}

.task-info {
  flex: 1;
  font-size: 26rpx;
  color: #333;
}

.task-project {
  flex: 1.5;
}

/* 滚动条样式 */
.task-list::-webkit-scrollbar {
  width: 6rpx;
}

.task-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3rpx;
}

.task-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3rpx;
}

.task-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
